<template>
  <el-collapse-item name="2">
    <template #title>
      <h2>服务器配置</h2>
    </template>
    <div v-for="(item, idx) in config_list" :key="idx">
      <h3>{{ item.title }}</h3>
      <el-row
        v-for="(param, idx) in item.params"
        :key="item.title + '_' + idx"
        align="middle"
        style="margin-top: 20px"
      >
        <el-col :span="4">
          <b>{{ param.label }}</b>
        </el-col>
        <el-col :span="19">
          <el-input
            v-model="server_config[item.key][param.key]"
            style="width: 100%"
            :placeholder="`请输入${param.label}`"
          />
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
  </el-collapse-item>
</template>
<script setup lang="ts">
import store from "~/utils/store";
const config = toRef(store);
const server_config = ref({
  blinker: { password: "" },
  bemfa: { key: "", id: "appID", password: "secretKey" },
  mqtt: { id: "", password: "" },
});
const config_list = [
  {
    title: "电灯科技",
    key: "blinker",
    params: [
      {
        label: "密钥",
        key: "password",
      },
    ],
  },
  {
    title: "巴法云",
    key: "bemfa",
    params: [
      {
        label: "私钥",
        key: "key",
      },
      {
        label: "ID",
        key: "id",
      },
      {
        label: "密钥",
        key: "password",
      },
    ],
  },
  {
    title: "MQTT",
    key: "mqtt",
    params: [
      {
        label: "ID",
        key: "id",
      },
      {
        label: "密钥",
        key: "password",
      },
    ],
  },
];
</script>
<style scoped></style>
